<template>
    <div class="wrapper">
        <top-header title="车辆信息修改"></top-header>
        <scroller :show-scrollbar="false" class="content">
            <!-- <text class="cont_title">车辆基本信息</text> -->
            <div class="cont_car_brand bottom">
                <div>
                    <text class="car_brand_fir1" >汽车品牌</text>
                </div>
                <div>
                    <text class="car_brand_info select_box border" @click="carBrand">{{selectStyles.name}}</text>
                </div>
            </div>
            <div class="bottom">
                <div class="car_info">
                    <text class="car_info_name">车型</text>
                    <text class="car_info_date" @click="carModel">{{selectModel.name}}</text>
                    <!--<text class="car_param_title">排放标准</text>-->
                    <!--<text class="car_param_cont select_box " @click="carEmission">{{selectEmission.name}}</text>-->
                </div>
                <div class="car_info">
                    <text class="car_info_name">排量</text>
                    <text class="car_info_date" @click="carGas">{{selectGas.name}}</text>
                    <!--<text class="car_info_date" @click="showPopup('left')">{{selectGas.name}}</text>-->
                </div>
                <div class="car_info">
                    <text class="car_info_name">变速箱</text>
                    <text class="car_info_date" @click="carTransmi">{{selectTransmi.name}}</text>
                </div>
                <div>
                    <div class="car_info">
                        <text class="car_info_name">预约时间</text>
                        <!--<text class="car_info_date" @click="showCalendar(1)">{{boardingTime}}</text>-->
                        <text class="car_info_date" @click="pickerShow=true">{{boardingTime}}</text>
                    </div>
                    <div class="car_info">
                        <text class="car_info_name">车检日期</text>
                        <text class="car_info_date" @click="pickerInsuranceShow=true">{{insuranceTime}}</text>
                    </div>
                    <div class="car_info">
                        <text class="car_info_name">行驶里程</text>
                        <input type="number" class="car_info_input" v-model="sellCarParam.p_kilometre" placeholder="请输入行驶里程"/>
                        <text class="car_info_name">(万公里)</text>
                    </div>
                    <!--<div class="car_info">-->
                    <!--<text class="car_info_name">车检到期</text>-->
                    <!--<text class="car_info_date" @click="showCalendar(2)">{{vehicInspeTime}}</text>-->
                    <!--</div>-->
                    <!--<div class="car_info">-->
                    <!--<text class="car_info_name">商业险到期</text>-->
                    <!--<text class="car_info_date" @click="showCalendar(4)">{{commercialInsuranceTime}}</text>-->
                    <!--</div>-->
                </div>
            </div>
            <div class="bottom">
                <div>
                    <div class="car_info">
                        <text class="car_info_name">售价</text>
                        <input type="number" class="car_info_input" v-model="sellCarParam.p_price" placeholder="请输入售价"/>
                        <text class="car_info_name">(万元)</text>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <!--<div>-->
                <!--<text class="cont_title">车辆销售信息</text>-->
                <!--<div class="car_info">-->
                <!--<text class="car_info_name">新车价格</text>-->
                <!--<input type="number" class="car_info_input" v-model="sellCarParam.p_newprice" placeholder="请输入新车价格"/>-->
                <!--<text class="car_info_name">(万元)</text>-->
                <!--</div>-->

                <!--<div class="car_params">-->
                <!--<text class="car_param_title">进口国产</text>-->
                <!--<text class="car_param_cont select_box " @click="carCountry">{{selectCountry.name}}</text>-->
                <!--<text class="car_param_title"></text>-->
                <!--<text class="car_param_cont select_box"></text>-->
                <!--</div>-->
                <!--<div class="radio_class">-->
                <!--<text class="car_param_title">是否定期4S店保养</text>-->
                <!--<div class="car_param_val">-->
                <!--<text class="param_val_text" @click="maintListChecked(1)" :class="[sellCarParam.shop_support == 1? 'select_back':'']">有</text>-->
                <!--<text class="param_val_text" @click="maintListChecked(0)" :class="[sellCarParam.shop_support == 0? 'select_back':'']">无</text>-->
                <!--</div>-->
                <!--</div>-->
                <!-- <div class="radio_class">
                    <text class="car_param_title">车辆是否有抵押</text>
                    <div class="car_param_val">
                        <text class="param_val_text" @click="mortgageListChecked(1)" :class="[sellCarParam.mortgage == 1? 'select_back':'']">有</text>
                        <text class="param_val_text" @click="mortgageListChecked(2)" :class="[sellCarParam.mortgage == 2? 'select_back':'']">无</text>
                    </div>
                </div> -->
                <!--<div class="radio_class">-->
                <!--<text class="car_param_title">是否贷款救急</text>-->
                <!--<div class="car_param_val">-->
                <!--<text class="param_val_text" @click="loanListChecked(1)" :class="[sellCarParam.loan == 1? 'select_back':'']">是</text>-->
                <!--<text class="param_val_text" @click="loanListChecked(2)" :class="[sellCarParam.loan == 2? 'select_back':'']">否</text>-->
                <!--</div>-->
                <!--</div>-->
                <div class="bottom">
                    <text class="car_color_title">车辆颜色</text>
                    <div v-for="(v, i) in colorsList" class="row">
                        <div v-for="(item, k) in v" class="color_value" :class="[item.codeName ? 'color_val_bord':'', item == colorSelect?'select_back':'']" @click="setColor(item)">
                            <div :class="[item.codeDesc]"></div>
                            <text class="color_name">{{item.codeName}}</text>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <text class="car_config_title">车辆配置</text>
                    <div v-for="(v, i) in configList" class="row">
                        <div v-for="(item, k) in v" class="color_value" :class="[item.cPic ? 'color_val_bord':'', item.isSelect?'select_back':'']" @click="setConfig(i, k, item)">
                            <div class="light_config">
                                <image class="light_config_img" :src="item.cPic"></image>
                                <text class="color_name">{{item.cName}}</text>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="car_info">
                    <text class="car_info_name">购置税</text>
                    <input type="text" class="car_info_input" v-model="sellCarParam.p_tax" placeholder="请输入购置税"/>
                    <text class="car_info_name">(元)</text>
                </div> -->
                <!--<div class="car_info">-->
                <!--<text class="car_info_name">过户次数</text>-->
                <!--<input type="number" class="car_info_input" v-model="sellCarParam.transferTimes" placeholder="请输入过户次数"/>-->
                <!--<text class="car_info_name"></text>-->
                <!--</div>-->
                <!-- <wxc-checkbox-list :list="sellTypeList"
                           @wxcCheckBoxListChecked="sellTypeListChecked"></wxc-checkbox-list>
                <text class="sell_rule">(卖家在1-3个工作日收到款)</text> -->
            </div>
            <text class="cont_title">车况介绍</text>
            <textarea class="car_condition" v-model="sellCarParam.p_details" placeholder="请填写车况"></textarea>
            <text class="cont_title">联系方式</text>
            <div>
                <!-- <div class="car_info">
                    <text class="car_info_name">卖家类型</text>
                    <div class="car_param_val">
                        <text class="param_val_text" @click="sellerTypetListChecked(1)" :class="[sellCarParam.sellType == 1? 'select_back':'']">个人</text>
                        <text class="param_val_text" @click="sellerTypetListChecked(0)" :class="[sellCarParam.sellType == 0? 'select_back':'']">商家</text>
                    </div>
                </div> -->
                <div class="car_info">
                    <text class="car_info_name">联系人</text>
                    <input type="text" class="car_info_input" v-model="sellCarParam.p_username" placeholder="请输入联系人姓名"/>
                </div>
                <div class="car_info">
                    <text class="car_info_name">联系电话</text>
                    <input type="number" class="car_info_input" max-length="11" v-model="sellCarParam.p_tel" placeholder="请输入联系电话"/>
                </div>

            </div>
            <text class="cont_title">发布城市</text>
            <div>
                <!--<div class="cont_first">-->
                <!--<text class="cont_fir1">上牌城市</text>-->
                <!--<text class="cont_provice select_box border" @click="proviceBrand">{{proviceBrandText.name}}</text>-->
                <!--<text class="cont_provice select_box border" @click="cityBrand">{{cityBrandText.name}}</text>-->
                <!--</div>-->
                <div class="cont_first">
                    <text class="cont_fir1">所在城市</text>
                    <text class="cont_provice select_box border" @click="provice">{{proviceText.name}}</text>
                    <text class="cont_provice select_box border" @click="city">{{cityText.name}}</text>
                </div>
                <!--<div class="cont_first">-->
                <!--<text class="cont_fir1">看车地点</text>-->
                <!--<input type="text" class="car_info_input" v-model="sellCarParam.lookCarAdd" placeholder="请输入看车地点"/>-->
                <!--</div>-->
            </div>
            <div class="button">
                <wxc-button text="下一步"
                            @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </scroller>
        <div class="side_pop" ref="side" @swipe="swipePop">
            <list>
                <cell class="cell" v-for="item in list" @click="select(item)">
                    <text class="list_cont">{{item.name}}</text>
                </cell>
            </list>
        </div>
        <!--<am-popup-->
        <!--:show.sync="isLeftShow"-->
        <!--position="left"-->
        <!--width="500"-->
        <!--height="400">-->
        <!--<list>-->
        <!--<cell class="cell" v-for="item in list" @click="select(item)">-->
        <!--<text class="list_cont">{{item.name}}</text>-->
        <!--</cell>-->
        <!--</list>-->
        <!--</am-popup>-->
        <!--时间控件-->
        <am-date-picker
            :show.sync="pickerShow"
            min-date="2010-01-01"
            max-date="2055-12-31"
            format="YYYY-MM-DD"
            title="预约时间"
            v-model="boardingTime"
            @ok="onBoarding"
            @hide="onHide"
            @change="onChange">
        </am-date-picker>
        <am-date-picker
            :show.sync="pickerInsuranceShow"
            min-date="2010-01-01"
            max-date="2055-12-31"
            format="YYYY-MM-DD"
            title="保险到期"
            v-model="insuranceTime"
            @ok="onOK"
            @hide="onHide"
            @change="onChange"
        ></am-date-picker>
        <am-popup
            :show.sync="isLeftShow"
            :position="position"
            :offset="offset"
            :auto-close="autoClose"
            :popup-style="style"
            width="500"
            height="900"
        >
            <list>
                <cell class="cell" v-for="item in list" @click="select(item)">
                    <div class="list_cont">
                        <image :src="item.brandPic" class="list_cont_img"></image>
                        <text class="list_cont_text">{{item.name}}  {{item.brandEn}}</text>
                    </div>
                </cell>
            </list>
        </am-popup>
    </div>
</template>
<script>
import { WxcRadio, WxcCheckboxList, WxcButton,WxcPopup } from 'weex-ui';
import { AmDatePicker,AmPopup } from 'weex-amui';
import utilFunc from '../utils/util'
const animation = weex.requireModule('animation')
import header from '../common/header'
export default {
    components: { WxcRadio, WxcCheckboxList, WxcButton,WxcPopup,AmDatePicker,AmPopup,
        'top-header': header,
    },
    data () {
        return {
            value1: '2009-01-03 22:22',
            show: false,
            position: 'bottom',
            offset: {},
            autoClose: true,
            style: {},
            pickerShow: false,
            pickerInsuranceShow:false,
            token: '',
            list: [],
            isLeftShow: false,
            proviceText: { name: '请选择省份' },
            cityText: { name: '请选择城市' },
            proviceBrandText: { name: '请选择省份' },
            cityBrandText: { name: '请选择城市' },
            provinceList: [],
            cityList: [],
            selectBrand: { name: '请选择品牌' },
            selectSeries: { name: '请选择车系' },
            selectStyles: { name: '请选择汽车品牌' },
            colorsList: [],
            colorSelect: '',
            configList: [],
            selectConfigList: [],
            sellTypeList: [
                // { title: '包含过户费用', value: 1},
                { title: '支持分期付款', value: 2 },
            ],
            sellerTypetList: [
                { title: '个人', value: 1, checked: true },
                { title: '商家', value: 0 },
            ],
            btnStyle: {
                'background-color': '#1E90FF',
            },
            selecData: '',
            carSeriesList: [],
            carBrandList: [],
            carStylesList: [],
            selectTimeNum: '',
            boardingTime: '请选择日期',
            vehicInspeTime: '请选择日期',
            insuranceTime: '请选择日期',
            commercialInsuranceTime: '请选择日期',
            emissionList: [], // 排放标准
            selectEmission: { name: '请选择排放标准' },
            selectModel: { name: '请选择车型' },
            modelList: [],
            selectGas: { name: '请选择排量' },
            gasList: [],
            selectTransmi: { name: '请选择变速' },
            transmiList: [],
            selectCountry: { name: '请选择产地' },
            countryList: [],
            sellCarParam: {
                'id': '',
                'aid': '',  // 省份
                'cid': '',  // 城市
                'p_brand': '',  // 品牌
                'p_subbrand': '',  // 车系
                'p_subsubbrand': '',  // 款式
                'p_model': '',  // 车型
                'p_price': '',  // 预售价格
                'p_newprice': '',  // 新车价格 
                'p_tax': '',  // 购置税
                'p_emission': '',  // 排放标准
                'p_color': '',  // 颜色
                'p_gas': '',  // 排量
                'p_transmission': '',  // 变速箱
                'p_year': '',  // 上牌年份
                'p_month': '',  // 上牌月份
                'p_kilometre': '',  // 行驶里程
                'p_country': '',  // 产地
                'p_surveydate': '',  // 年检到期
                'p_insurancedate': '',  // 交强险到期
                'hlconfig': '',  // 亮点配置
                'j_selectImage': '',  // 图片
                'p_details': '',  // 汽车描述
                'p_username': '',  // 车主姓名 
                'p_tel': '',  // 车主电话  
                'carBrandAdd': '',  // 车牌所在地
                'transferTimes': '',  // 过户次数
                'lookCarAdd': '',  // 看车地点
                'mortgage': '1',  // 车辆是否有抵押
                'commercialInsurance': '',  // 商业险到期
                'carLabel': '1', // 车源标签描述
                'sellType': 1, // 卖家类型 0 平台 1 用户 2 商家
                'loan': '1', // 是否贷款救急
                'p_transferFee': '', // 是否包含过户费
                'p_supportStaging': '', // 是否支持分期
                "bargain_count": '', // 砍价次数
                "bargain_maxprice": '', // 最大砍价金额
                "bargain_minprice": '', // 最小砍价金额
                "is_bargain": '0', // 是否支持砍价 0不支持，1支持
                "uid": '', // 用户id
                "shop_support": '0', // 是否4s保养 0否，1是
                "store_id": '', // 是否是商家
            },
            //                 {
            //   "aid": 0,
            //   "bargainCount": 0,
            //   "bargainMaxprice": 0,
            //   "bargainUidCount": 0,
            //   "carbrandadd": "string",
            //   "carlabel": "string",
            //   "cid": 0,
            //   "commercialinsurance": "2019-03-31T11:52:53.657Z",
            //   "hlconfig": "string",
            //   "ishot": true,
            //   "isrecom": true,
            //   "issell": true,
            //   "isshow": true,
            //   "issprecom": true,
            //   "istop": true,
            //   "listtime": "2019-03-31T11:52:53.657Z",
            //   "loan": 0,
            //   "lookcaradd": "string",
            //   "mobilecode": "string",
            //   "mortgage": 0,
            //   "p1": "string",
            //   "p10": 0,
            //   "p2": "string",
            //   "p3": "string",
            //   "p4": "string",
            //   "p5": "string",
            //   "p6": 0,
            //   "p7": 0,
            //   "p8": 0,
            //   "p9": 0,
            //   "pAddtime": "2019-03-31T11:52:53.657Z",
            //   "pAllname": "string",
            //   "pBrand": 0,
            //   "pColor": "string",
            //   "pCountry": "string",
            //   "pDetails": "string",
            //   "pEmission": "string",
            //   "pGas": "string",
            //   "pHits": 0,
            //   "pId": 0,
            //   "pInsurancedate": "2019-03-31T11:52:53.657Z",
            //   "pKeyword": "string",
            //   "pKeywords": "string",
            //   "pKilometre": 0,
            //   "pMainpic": "string",
            //   "pModel": 0,
            //   "pMonth": 0,
            //   "pName": "string",
            //   "pNewprice": 0,
            //   "pNo": "string",
            //   "pOpen": true,
            //   "pPics": "string",
            //   "pPrice": 0,
            //   "pSource": "string",
            //   "pSubbrand": 0,
            //   "pSubsubbrand": 0,
            //   "pSupportstaging": 0,
            //   "pSurveydate": "2019-03-31T11:52:53.657Z",
            //   "pTax": 0,
            //   "pTel": "string",
            //   "pTransferfee": 0,
            //   "pTransmission": "string",
            //   "pUsername": "string",
            //   "pYear": 0,
            //   "selltype": 0,
            //   "topendtime": 0,
            //   "topstarttime": 0,
            //   "transfertimes": 0,
            //   "uid": 0
            // }
        }
    },
    created () {
        this.getBrandList() // 获取车品牌
        this.getProviceCityList(0) // 获取省份
        this.getConfigList() // 汽车加装配置
        this.getColorsList() // 获取颜色
        this.getEmissionList() // 获取排放标准
        this.getModelList() // 获取车型
        this.getGasList() // 获取排量
        this.getTransmiList() // 获取变速箱
        this.getCountryList() // 获取产地
        let user = this.$storage.getSync('UserInfo')
        this.sellCarParam.uid = user.id
        this.sellCarParam.p_tel = user.mobile
        this.$router.getParams().then(resData => {
            if (resData.stroeId) {
                this.sellCarParam.store_id = resData.stroeId
                this.sellCarParam.sellType = 2
            }
            this.getCarById(resData.carId)
        })
    },
    mounted () {
    },
    methods: {
        showPopup (position, offset = {}, autoClose = true, style = {}) {
            this.position = position
            this.offset = offset
            this.autoClose = autoClose
            this.show = true
            this.style = style
        },
        //时间弹出框隐藏
        onHide (type) {
            console.log('hide', type)
        },
        onBoarding (value) {
            console.log('ok', value)
            this.sellCarParam.p_year = value.split('-')[0]
            this.sellCarParam.p_month = value.split('-')[1]
        },
        //时间弹出框确认
        onOK (value) {
            console.log('ok', value)
            this.sellCarParam.p_insurancedate = value + " 12:00:00"
        },
        onChange (value) {
            console.log('change', value)
        },
        // 返回
        back () {
            this.$router.back();
        },
        // 滑动事件
        swipePop (e) {
            if (e.direction == 'left') {
                this.hide()
            }
        },
        hide () {
            // this.sideAnima(-750, 800);
            this.isLeftShow = false
        },
        sideAnima (trans, time) {
            var sideEl = this.$refs.side;
            animation.transition(sideEl, {
                styles: {
                    transform: 'translateX(' + trans + 'px)',
                    transformOrigin: 'left center'
                },
                duration: time, //ms
                timingFunction: 'ease',
                delay: 0 //ms
            }, function () {
            })
        },
        select (item) {
            switch (this.selecData) {
                case 1: // 车系
                    this.selectSeries = item
                    this.sellCarParam.p_subbrand = item.seriesId
                    this.getStylesList() // 获取款式
                    break
                case 2: // 品牌
                    this.selectBrand = item
                    this.sellCarParam.p_brand = item.brandId
                    this.getSeriesList() // 获取车系
                    break
                case 3: // 款式
                    this.selectStyles = item
                    this.sellCarParam.p_subsubbrand = item.stylesId
                    this.hide()
                    break
                case 4:  // 省份
                    this.proviceText = item
                    this.sellCarParam.aid = item.id
                    this.hide()
                    this.getProviceCityList(item.id) // 获取市
                    break
                case 5:  // 市
                    this.cityText = item
                    this.sellCarParam.cid = item.id
                    this.hide()
                    break
                case 6:  // 排放标准
                    this.selectEmission = item
                    this.sellCarParam.p_emission = item.name
                    this.hide()
                    break
                case 7:  // 车型
                    this.selectModel = item
                    this.sellCarParam.p_model = item.sId
                    this.hide()
                    break
                case 8:  // 排量
                    this.selectGas = item
                    this.sellCarParam.p_gas = item.name
                    this.hide()
                    break
                case 9:  // 变速箱
                    this.selectTransmi = item
                    this.sellCarParam.p_transmission = item.name
                    this.hide()
                    break
                case 10:  // 产地
                    this.selectCountry = item
                    this.sellCarParam.p_country = item.name
                    this.hide()
                    break
                case 11:  // 上牌省份
                    this.proviceBrandText = item
                    this.hide()
                    this.getProviceCityList(item.id) // 获取市
                    break
                case 12:  // 上牌城市
                    this.cityBrandText = item
                    this.sellCarParam.carBrandAdd = item.name
                    this.hide()
                    break
                default:
                    break
            }
        },
        // 调取侧栏
        showSide (list, num) {
            // this.$notice.toast({ message: list})
            this.selecData = num
            this.list = list
            // this.sideAnima(750, 800);
            this.isLeftShow = true
        },
        // 封装数据
        dataPack (dataList, name) {
            for (let i = 0, length = dataList.length; i < length; i++) {
                dataList[i].name = dataList[i][name]
            }
            return dataList
        },
        
        next () {
            if (this.validterParam())
                this.$router.open({
                    name: 'acw.sellcar.uploadpictureupdate',
                    type: 'PUSH',
                    params: this.sellCarParam
                });
        },
        // 查询省市
        getProviceCityList (id) {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'region.childlist', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    id: id
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    if (!id) {
                        this.provinceList = resData.data
                    } else {
                        this.cityList = resData.data
                    }
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 选择省份
        provice () {
            this.showSide(this.provinceList, 4)
        },
        // 选择城市
        city () {
            if (!this.proviceText.id) {
                this.$notice.toast({ message: "请选择省份"})
                return
            }
            this.showSide(this.cityList, 5)
        },
        // 选择上牌省份
        proviceBrand () {
            this.showSide(this.provinceList, 11)
        },
        // 选择上牌城市
        cityBrand () {
            if (!this.proviceBrandText.id) {
                this.$notice.toast({ message: "请选择省份"})
                return
            }
            this.showSide(this.cityList, 12)
        },
        // 查询汽车品牌
        getBrandList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'brand.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {}
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                // this.$notice.toast({ message: resData.data})
                if(resData && resData.errno == 0){
                    this.carBrandList = this.dataPack(resData.data.brandList, 'brandName')
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 选择汽车品牌
        carBrand () {
            this.showSide(this.carBrandList, 2)
        },
        // 查询车系
        getSeriesList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'series.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    brand_id: this.selectBrand.brandId
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                // this.$notice.toast({ message: resData.data})
                if(resData && resData.errno == 0){
                    this.carSeriesList = this.dataPack(resData.data, 'seriesName')
                    this.showSide(this.carSeriesList, 1)
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 选择车系
        // carSeries () {
        //     if (!this.selectBrand.brandId) {
        //         this.$notice.toast({ message: "请选择品牌"})
        //         return
        //     }
        //     this.showSide(this.carSeriesList, 1)
        // },
        // 查询款式
        getStylesList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'styles.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    brand_id: this.selectBrand.brandId,
                    series_id: this.selectSeries.seriesId
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                // this.$notice.toast({ message: resData.data})
                if(resData && resData.errno == 0){
                    this.carStylesList = this.dataPack(resData.data, 'stylesName')
                    this.showSide(this.carStylesList, 3)
                } else {
                    // this.$notice.toast({ message: resData.errmsg})
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
                // this.$notice.toast({ message: "登录失败, 请重试"})
            })
        },
        // 选择款式
        // carStyles () {
        //     if (!this.selectSeries.seriesId) {
        //         this.$notice.toast({ message: "请选择车系"})
        //         return
        //     }
        //     this.showSide(this.carStylesList, 3)
        // },
        // 查询车型
        getModelList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'model.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    brand_id: this.selectBrand.brandId,
                    series_id: this.selectSeries.seriesId
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.modelList = this.dataPack(resData.data, 'sName')
                } else {
                    // this.$notice.toast({ message: resData.errmsg})
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
                // this.$notice.toast({ message: "登录失败, 请重试"})
            })
        },
        // 选择车型
        carModel () {
            this.showSide(this.modelList, 7)
        },
        // 查询加装配置
        getConfigList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'hlconfig.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {}
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.configList = this.configPack(resData.data)
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 封装加装配置
        configPack (dataList) {
            let array = []
            let len = dataList.length
            for (let j = 0; j < len; j++) {
                dataList[j].isSelect = false
            }
            for (let i = 0; i < len; i += 3) {
                array.push(dataList.slice(i, i + 3))
            }
            switch (len % 3) {
                case 1:
                    array[array.length - 1].push({})
                    array[array.length - 1].push({})
                    break;
                case 2:
                    array[array.length - 1].push({})
                    break;
                default:
                    break;
            }
            return array
        },
        // 选择加装配置
        setConfig (x, y, config) {
            let index = this.selectConfigList.indexOf(config)
            if (index == -1) {
                this.$set(this.configList[x][y], 'isSelect', true)
                this.selectConfigList.push(config)
            } else {
                this.$set(this.configList[x][y], 'isSelect', false)
                this.selectConfigList.splice(index, 1)
            }
            let selectConfigId = ''
            for (let i = 0, len = this.selectConfigList.length; i < len; i++) {
                selectConfigId += this.selectConfigList[i].id + ','
            }
            this.sellCarParam.hlconfig = selectConfigId
        },
        // 字典查询接口
        dictionaryRequest (param) {
            return new Promise((resolve, reject) => {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'staticData.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        code_type: param
                    }
                }).then(resData => {
                    // 成功回调
                    this.isShowLoad = false;
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        resolve(resData.data)
                    } else {
                        reject(resData.errmsg)
                    }
                }, error => {
                    // 错误回调
                    this.isShowLoad = false;
                    console.log(error)
                })
            })
        },
        // 查询颜色
        getColorsList () {
            this.dictionaryRequest('car_color').then((res) => {
                this.colorsList = this.colorPack(res)
            }, (error) => {

            })
        },
        // 封装颜色
        colorPack (dataList) {
            let array = []
            let len = dataList.length
            for (let i = 0; i < len; i += 4) {
                array.push(dataList.slice(i, i + 4))
            }
            switch (len % 4) {
                case 1:
                    array[array.length - 1].push({})
                    array[array.length - 1].push({})
                    array[array.length - 1].push({})
                    break;
                case 2:
                    array[array.length - 1].push({})
                    array[array.length - 1].push({})
                    break;
                case 3:
                    array[array.length - 1].push({})
                    break;
                default:
                    break;
            }
            return array
        },
        // 选择颜色
        setColor (config) {
            this.colorSelect = config
            this.sellCarParam.p_color = config.codeName
        },
        // 查询排放标准
        getEmissionList () {
            this.dictionaryRequest('car_emission').then((res) => {
                this.emissionList = this.dataPack(res, 'codeName')
            }, (error) => {

            })
        },
        // 封装排放标准
        carEmission () {
            this.showSide(this.emissionList, 6)
        },
        // 查询排量
        getGasList () {
            this.dictionaryRequest('car_gas').then((res) => {
                this.gasList = this.dataPack(res, 'codeName')
            }, (error) => {

            })
        },
        // 封装排量
        carGas () {
            this.showSide(this.gasList, 8)
        },
        // 查询变速箱
        getTransmiList () {
            this.dictionaryRequest('car_transmission').then((res) => {
                this.transmiList = this.dataPack(res, 'codeName')
            }, (error) => {

            })
        },
        // 封装变速箱 
        carTransmi () {
            this.showSide(this.transmiList, 9)
        },
        // 查询产地
        getCountryList () {
            this.dictionaryRequest('car_country').then((res) => {
                this.countryList = this.dataPack(res, 'codeName')
            }, (error) => {

            })
        },
        // 封装产地
        carCountry () {
            this.showSide(this.countryList, 10)
        },
        // 车辆是否有4s保养
        maintListChecked (value) {
            this.sellCarParam.shop_support = value
        },
        // 车辆是否有抵押
        mortgageListChecked (value) {
            this.sellCarParam.mortgage = value
        },
        // 商家类型
        sellerTypetListChecked (value) {
            this.sellCarParam.sellType = value
        },
        // 是否贷款救急
        loanListChecked (value) {
            this.sellCarParam.loan = value
        },
        // 是否包含过户费  是否支持分期
        sellTypeListChecked (e) {
            // this.sellCarParam.p_transferFee = e.checkedList[0]
            // this.sellCarParam.p_supportStaging = e.checkedList[1]
        },
        // 校验值
        validterParam () {
            if (!this.sellCarParam['p_brand']) {
                this.$notice.toast({ message: '请选择品牌'})
                return false
            } else if (!this.sellCarParam['p_subbrand']) {
                this.$notice.toast({ message: '请选择车系'})
                return false
            } else if (!this.sellCarParam['p_subsubbrand']) {
                this.$notice.toast({ message: '请选择款式'})
                return false
            } else if (!this.sellCarParam['p_model']) {
                this.$notice.toast({ message: '请选择车型'})
                return false
            } else if (!this.sellCarParam['p_price']) {
                this.$notice.toast({ message: '请填写售价'})
                return false
                // } else if (!this.sellCarParam['p_newprice']) {
                //     this.$notice.toast({ message: '请填写新车价格'})
                //     return false
                // } else if (!this.sellCarParam['p_tax']) {
                //     this.$notice.toast({ message: '请填写购置税'})
                //     return false
                // } else if (!this.sellCarParam['p_emission']) {
                //     this.$notice.toast({ message: '请选择排放标准'})
                //     return false
            } else if (!this.sellCarParam['p_color']) {
                this.$notice.toast({ message: '请选择颜色'})
                return false
            } else if (!this.sellCarParam['p_gas']) {
                this.$notice.toast({ message: '请选择排量'})
                return false
            } else if (!this.sellCarParam['p_transmission']) {
                this.$notice.toast({ message: '请选择变速箱'})
                return false
            } else if (!this.sellCarParam['p_year']) {
                this.$notice.toast({ message: '请选择上牌年份'})
                return false
            } else if (!this.sellCarParam['p_month']) {
                this.$notice.toast({ message: '请选择上牌月份'})
                return false
            } else if (!this.sellCarParam['p_kilometre']) {
                this.$notice.toast({ message: '请填写行驶里程'})
                return false
                // } else if (!this.sellCarParam['p_country']) {
                //     this.$notice.toast({ message: '请选择产地'})
                //     return false
                // } else if (!this.sellCarParam['p_surveydate']) {
                //     this.$notice.toast({ message: '请选择年检到期时间'})
                //     return false
            } else if (!this.sellCarParam['p_insurancedate']) {
                this.$notice.toast({ message: '请选择交强险到期时间'})
                return false
            } else if (!this.sellCarParam['hlconfig']) {
                this.$notice.toast({ message: '请选择汽车配置'})
                return false
            } else if (!this.sellCarParam['p_details']) {
                this.$notice.toast({ message: '请填写汽车描述'})
                return false
            } else if (!this.sellCarParam['p_username']) {
                this.$notice.toast({ message: '请填写车主姓名'})
                return false
            } else if (!this.sellCarParam['p_tel']) {
                this.$notice.toast({ message: '请填写车主电话'})
                return false
                // } else if (!this.sellCarParam['']) {
                //     this.$notice.toast({ message: '请选择上牌城市'})
                //     return false
                // } else if (!this.sellCarParam['lookCarAdd']) {
                //      this.$notice.toast({message: '请填写看车地点'})
                //      return false
            }else if (!this.sellCarParam['aid']) {
                this.$notice.toast({ message: '请选择省份'})
                return false
            } else if (!this.sellCarParam['cid']) {
                this.$notice.toast({ message: '请选择城市'})
                return false
                // } else if (!this.sellCarParam['mortgage']) {
                //     this.$notice.toast({ message: '请选择车辆是否有抵押'})
                //     return false
                // } else if (!this.sellCarParam['sellType']) {
                //     this.$notice.toast({ message: '请选择卖家类型'})
                //     return false
                // } else if (!this.sellCarParam['loan']) {
                //     this.$notice.toast({ message: '请选择是否贷款救急'})
                //     return false
                // } else if (!this.sellCarParam['p_transferFee']) {
                //     this.$notice.toast({ message: '请选择是否包含过户费'})
                //     return false
                // } else if (!this.sellCarParam['p_supportStaging']) {
                //     this.$notice.toast({ message: '请选择是否支持分期'})
                //     return false
                // } else if (!this.sellCarParam['shop_support']) {
                //     this.$notice.toast({ message: '请选择是否4s保养'})
                //     return false
            }else if (!utilFunc.checkIsHasSpecialStr(this.sellCarParam['p_username'])) {
                this.$notice.toast({ message: '联系人姓名只能是汉字或字母'})
                return false
            }
            return true
        },
        // 查询汽车详情
        getCarById (id) {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'cars.getCarById', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    car_id: id
                }
            }).then(resData => {
                // 成功回调
                console.log(resData)
                // this.$notice.toast({message: resData})
                if(resData && resData.errno == 0){
                    this.sellCarParam = resData.data.car
                    this.carDetail.j_selectImage = resData.data.car.pPics
                }
            }, error => {
                // 错误回调
                console.log(error)
            })
        },
    },
}

</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.select_back{
    background-color: #aaa;
}
.color_back{
    background-color: #eee;
}
.content{
    background-color: #fff;
}
.cont_title{
    background-color: #1E90FF;
    text-align: center;
    color: #fff;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
}
.cont_first{
    flex-direction: row;
    align-items: center;
    height: 80px;
}
.cont_fir1{
    width: 160px;
    text-align: center;
    color: #666;
}
.cont_provice{
    width: 260px;
}
.cont_car_brand {
    align-items: flex-start;
    flex-direction: row;
    padding-top: 20px;
}
.car_brand_title{
    flex-direction: row;
}
.car_brand_fir1{
    width: 160px;
    text-align: center;
    color: #666;
    height: 60px;
    line-height: 60px;
}
.car_brand_info{
    width: 500px;
    height: 70px;
    margin-bottom: 20px;
}
.border {
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 6px;
}
.bottom{
    padding-bottom: 20px;
    border-bottom-style: solid;
    border-bottom-color: #eee;
    border-bottom-width: 1px;
}

.car_params{
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.radio_class{
    flex-direction: row;
    align-items: center;
}
.car_param_title{
    text-align: left;
    padding-left: 10px;
    color: #666;
    height: 80px;
    line-height: 80px;
    flex: 1;
}
.car_param_val{
    flex: 1;
    flex-direction: row;
}
.param_val_text{
    width: 100px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
}
.car_param_cont{
    flex: 1;
}
.select_box{
    height: 70px;
    line-height: 60px;
    text-align: center;
    color: #666;
    margin-right: 16px;
    padding-right: 16px;
    padding-left: 16px;
}
.car_color_title{
    height: 80px;
    line-height: 80px;
}
.color_value{
    flex-direction: row;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 15px;
    padding: 5px;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.color_val_bord{
    border-style: solid;
    border-color: #999;
    border-width: 1px;
    background-color: #eee;
}
.row{
    flex-direction: row;
    /* height:80px; */
}
.red{
    height: 30px;
    width: 30px;
    background-color: #f00;
}
.green{
    height: 30px;
    width: 30px;
    background-color: #0f0;
}
.blue{
    height: 30px;
    width: 30px;
    background-color: #00f;
}
.yellow{
    height: 30px;
    width: 30px;
    background-color: #ff0;
}
.white{
    height: 30px;
    width: 30px;
    background-color: #fff;
}
.black{
    height: 30px;
    width: 30px;
    background-color: #000;
}
.silver_gray{
    height: 30px;
    width: 30px;
    background-color: #C0C0C0;
}
.purple{
    height: 30px;
    width: 30px;
    background-color: #8A2BE2;
}
.brown{
    height: 30px;
    width: 30px;
    background-color: #A52A2A;
}
.brownness{
    height: 30px;
    width: 30px;
    background-color: #556B2F;
}
.orange{
    height: 30px;
    width: 30px;
    background-color: #FFA500;
}
.pink{
    height: 30px;
    width: 30px;
    background-color: #FFC0CB;
}
.champagne{
    height: 30px;
    width: 30px;
    background-color: #FFFF99;
}
.light_config{
    align-items: center;
    /* width: 150px; */
}
.light_config_img{
    width: 50px;
    height: 50px;
}
.color_name{
    color: #666;
    margin-left: 15px;
}
.car_config_title{
    height: 80px;
    line-height: 80px;
}
.car_info{
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.car_info_name{
    color: #666;
    width: 200px;
    text-align: center;
}
.car_info_input{
    width: 360px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
}
.car_info_date{
    width: 360px;
    color: #666;
    padding: 5px;
    text-align: center;
    border-style: solid;
    border-color: #666;
    border-width: 1px;
    border-radius: 5px;
    height: 70px;
    line-height: 60px;
}
.sell_rule{
    color: #f00;
    height: 80px;
    line-height: 80px;
}
.car_condition{
    height: 240px;
    border-style: solid;
    border-color: #666;
    color: #666;
    border-width: 1px;
    border-radius: 10px;
    margin: 10px;
    padding: 8px;
}
.button{
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
/* 左侧弹窗 */
.side_pop{
    position: absolute;
    top: 138px;
    background-color: #fff;
    width: 750px;
    height: 1334px;
    left: -750px;
}
.cell{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont{
    height: 100px;
    margin-left: 20px;
    flex-direction: row;
    align-items: center;
}
.list_cont_img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.list_cont_text{
    color: #333;
    font-size: 30px;
}
</style>
